<template>
  <v-container class="text-center">
    <v-row justify="center">
      <v-col cols="6" sm="4" md="3"> <v-img :src="src"></v-img></v-col>
    </v-row>
    <v-row justify="center" class="mt-md-10 mt-sm-6 mt-4">
      <v-col cols="auto">
        <h1 class="text-h1 font-weight-bold">
          {{ title }}
        </h1>

        <div class="text-body-1 pt-4 pb-6">
          {{ description }}
        </div>

        <v-btn
          depressed
          large
          to="/"
          class="elevation-2"
          color="primary"
          outlined
        >
          带我离开
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class NormalPage extends Vue {
  // region Prop
  @Prop({ default: "404" }) readonly title!: string;
  @Prop({ default: "页面不存在！" }) readonly description!: string;
  @Prop({ default: "01.png" }) readonly src!: string;
  // endregion
  // region Data
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
